<template>
  <div class="testContent">
    <h1>这是Test组件</h1>
    <hr>
    <!-- <p v-color>测试v-color自定义指令</p> -->
    <p v-color="color">自定义属性传值</p>
    <button @click="changeColor">修改color的值</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      color: 'blue'
    }
  },
  // 自有自定义指令的结点
  directives: {
    // 定义名为color的指令， 指向一个配置对象
    // color: {
    //   bind(el, binding) {
    //     // 当指令第一次被绑定到元素上的时候，会立即触发bind函数
    //     // 形参中的el是绑定此指定的、原生的DOM对象
    //     console.log('触发了v-color的bind函数');
    //     console.log(binding);
    //     el.style.color = binding.value
    //   },
    //   update(el, binding) {
    //     console.log('update方法被调用');
    //     console.log(binding);
    //     el.style.color = binding.value
    //   }
    // }
    color(el, binding) {
      el.style.color = binding.value
    }
  },
  methods: {
    changeColor() {
      this.color = 'red'
    }
  }
}
</script>
 
<style lang="less" scoped></style>
